<template>
    <a-modal :title="form.id ? '编辑' : '新增'" centered v-model:visible="visible" width="50%" cancelText="取消" okText="保存" @ok="handleOk">
        <div>
            <a-form layout="inline" :model="form" ref="ruleFormRef" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="工作名称" name="workName">
                            <a-input v-model:value="form.workName" placeholder="请输入工作名称限制100个字" :maxlength="100" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="岗位" name="position">
                            <a-select placeholder="请选择" v-model:value="form.position" @change="handleChange">
                                <a-select-option v-for="item of dicOptions.position" :key="item.code"> {{ item.dimensionName }} </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="工作类型" name="workType">
                            <a-select placeholder="请选择" v-model:value="form.workType">
                                <a-select-option v-for="item of workTypeOptions" :key="item.code"> {{ item.dimensionName }} </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :span="12">
                        <div>
                            <a-form-item label="人员" name="agentUser">
                                <div>
                                    <h-search-select-cell
                                        :default-value="form.agentUser"
                                        type="allUser"
                                        keyField="empId"
                                        label="name"
                                        @success="handleSelectChange($event, 'agentUser')"
                                    >
                                        <template #label="{ record }"> {{ record.name }}（{{ record.empId }}） </template>
                                    </h-search-select-cell>
                                </div>
                            </a-form-item>
                        </div>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="开始时间" name="startTime">
                            <h-date-picker-cell v-model:value="form.startTime" :disabledDate="false" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="12">
                        <a-form-item label="预计工时" name="planWorkHours">
                            <a-input-number v-model:value="form.planWorkHours" :min="1" :max="10000" :maxlength="5" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" /> -->
                    <a-col :span="12">
                        <a-form-item label="耗费工时" name="expendWorkHours">
                            <a-input-number v-model:value="form.expendWorkHours" :min="1" :max="99999" :maxlength="5" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-modal>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { HSearchSelectCell, HDatePickerCell } from '@/components';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, nextTick } from 'vue';
export default defineComponent({
    name: 'CreateVersion',
    components: {
        HSearchSelectCell,
        HDatePickerCell
    },
    emits: ['success'],
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            visible: false,
            form: {
                workName: '',
                position: '',
                workType: '',
                agentUser: '',
                // planWorkHours: '',
                expendWorkHours: '',
                id: '',
                startTime: ''
            },
            workTypeOptions: []
        });
        const rules: any = {
            workName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
            position: [{ required: true, message: '岗位不能为空', trigger: 'blur' }],
            agentUser: [{ required: true, message: '人员不能为空', trigger: 'blur' }],
            workType: [{ required: true, message: '工作类型不能为空', trigger: 'change' }],
            startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }]
            // planWorkHours: [{ required: true, message: '预计工时不能为空', trigger: 'blur', type: 'number' }],
            // expendWorkHours: [{ required: true, message: '耗费工时不能为空', trigger: 'blur', type: 'number' }],
        };
        const handleChange = (val) => {
            const target = store.getters.dicOptions.position.find((item) => item.code === val);
            state.workTypeOptions = target.pmpDictionaryDTOs;
            state.form.workType = '';
        };
        const open = (detail: any = null) => {
            state.visible = true;
            nextTick(() => {
                unref(ruleFormRef).clearValidate();
            });
            if (detail) {
                const { workName, position, workType, agentUser, expendWorkHours, id, startTime } = detail;
                state.form = {
                    workName,
                    position,
                    workType,
                    agentUser,
                    expendWorkHours,
                    id,
                    startTime
                };
                const target = store.getters.dicOptions.position.find((item) => item.code === position);
                state.workTypeOptions = target.pmpDictionaryDTOs;
            } else {
                state.form = {
                    workName: '',
                    position: '',
                    workType: '',
                    agentUser: '',
                    expendWorkHours: '',
                    startTime: ''
                };
            }
        };
        const handleSelectChange = (val, field: string) => {
            switch (field) {
                case 'agentUser':
                    state.form.agentUser = val.name;
                    state.form.agentUserEmpId = val.empId;
                    break;
            }
        };
        const handleOk = () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave();
                })
                .catch((err: any) => {
                    console.log(err);
                });
        };
        const handleSave = async () => {
            const query = {
                ...state.form,
                productId: props.detail.id
            };
            const { success, errorMsg } = await api.productWorkLogModel.save(query);
            state.visible = false;
            if (success) {
                message.success('保存成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleChange,
            handleOk,
            handleSelectChange
        };
    }
});
</script>
